<!DOCTYPE html>
<html>
<head>
    <title>Drag and Drop Example</title>
    <script src="EventUtil.js"></script>
</head>
<body>
    <p>Try dragging the image over the textbox.</p>
    <img id="smiley" src="smile.gif">
    <input type="text" id="droptarget" value="">
    <div id="output"></div>
    <script>
        var droptarget = document.getElementById("droptarget");
        
        function handleEvent(event){
            document.getElementById("output").innerHTML += event.type + "<br>";
        }

        EventUtil.addHandler(droptarget, "dragenter", handleEvent);
        EventUtil.addHandler(droptarget, "dragover", handleEvent);
        EventUtil.addHandler(droptarget, "dragleave", handleEvent);
        EventUtil.addHandler(droptarget, "drop", handleEvent);
        
    </script>
</body>
</html>
